// 一行代码打开弹窗组件
import  Dialog from '../Dialog.vue'
import { createApp, h } from 'vue'
export const openDialog = (options)=>{
  const { title, content, query, cancel } = options
  // 创建一个临时的div
  const div = document.createElement('div')
  document.body.appendChild(div)
  const close = ()=>{
    app.unmount(div) // 移除div中的内容
    div.remove() // 移除创建的div
  }
  const app = createApp({
    render(){
      return h(
        Dialog,
        {visible: true,
          'onUpdate:visible':(newVisble)=>{ // onUpdate:visible 监听visible
          if(newVisble === false) {
            close()
          }
          console.log(newVisble)},
          query,
          cancel
        }, // 属性
        {title, content}  // 插槽部分的内容
      )
    }
  })
  app.mount(div)
}
